<template>
  <app-page :full="true">
    <div class="page">
      <div class="sidebar">
        <div class="sidebar-header">
          <div class="btn-add" @click="chatStore.createChat">开启新对话</div>
        </div>

        <div
          class="menu-item"
          v-for="(item, index) in chats"
          :class="{ 'menu-item--active': chatId == item.chatId }"
          @click="handleChatClick(item, index)"
        >
          {{ item.title || '新会话' }}
        </div>
      </div>

      <div class="page">
        <template v-if="chatItemStore">
          <div class="main-left">
            <app-scrollbar ref="scrollContainer">
              <div class="message">
                <Message :messages="messages" :loading="chatItemStore.state.loading" />
              </div>
            </app-scrollbar>
            <Sender />
          </div>

          <div class="main-right">
            <app-scrollbar ref="previewScrollRef">
              <Content />
            </app-scrollbar>
          </div>
        </template>

        <Transition name="fade">
          <div class="welcome" v-if="!chatItemStore || chatItemStore.state.showWelcome">
            <Sender />
          </div>
        </Transition>
      </div>

      <InputDialog v-model="chatStore.state.dialog.input.show" :data="chatStore.state.dialog.input.data" />
      <PreviewDialog
        v-model="chatStore.state.dialog.preview.show"
        :data="chatStore.state.dialog.preview.data"
      />
    </div>
  </app-page>
</template>
<script setup>
import axios from 'axios'
import Sender from './components/Sender.vue'
import Welcome from './components/Welcome.vue'
import Message from './components/Message.vue'
import Content from './components/content/Content.vue'

import InputDialog from './components/InputDialog.vue'
import PreviewDialog from './components/PreviewDialog.vue'

import { useChatStore } from './chat.js'

const welcome = ref(true)
const chatStore = useChatStore()
const { state, scrollContainer, messages, chatItemStore } = chatStore
const { messageId, chats, chatId } = toRefs(state)

const previewScrollRef = ref(null)

provide('/chat', {
  chatStore,
})

const handleChatClick = (item, index = null) => {
  chatStore.state.chatId = item.chatId
  if (item.type == 'history') {
    if (chatItemStore.value.state.messages.length > 0) return
    chatItemStore.value.send('@input: @session_details_' + item.chatId)
  }
}
</script>
<style lang="scss" scoped>
.page {
  display: flex;
  overflow: hidden;
  height: 100%;
}

.sidebar {
  // background-color: #fafafa;
  background-color: #fcfdfd;
  width: 260px;
  padding: 16px;
  border-right: 1px solid #f1f2f4;
}

.sidebar-header {
  margin: 0 -16px 16px -16px;
  padding: 0 16px 16px 16px;
  border-bottom: 1px solid #f1f2f4;
  .btn-add {
    background-color: var(--primary);
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
  }
}

.page {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.main-left {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  max-width: 36%;
  background-color: #fbfbfc;
}

.main-right {
  flex: 1;
  background-color: #fefeff;
  border-left: 1px solid #f2f3f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.welcome {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.menu-item--active {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
}
</style>
